import React from 'react';
import { withRouter } from 'react-router-dom'
import {connect} from 'react-redux'
import {logout, getUserInfo} from '../../actions/user.redux'
import {Icon, Modal, Button, Form, Input, message,} from 'antd';
import axios from 'axios'

const FormItem = Form.Item;
function Title() {
  return <div>
    <div className="modalTitle">
      <Icon type="plus" style={{fontSize: '24px', color: '#007be2'}}/>
    </div>
    <span>修改密码</span>
  </div>
}
@connect(
  state => state.user,
  {logout, getUserInfo}
)

@withRouter
class App extends React.Component {
  hideModal = () => {
    this.props.onHide()
  }

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('newPwd')) {
      callback('与新密码不一致');
    } else {
      callback();
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields(async (err, values) => {
      if (!err) {
        let res = await
          axios.post('vrv-monitor-platform-web/user/update/password', {
            oldPassword: values.oldPwd,
            newPassword: values.newPwd,
          })
        if (res.data.statusCode === 200) {
          this.props.logout()
          this.props.history.push('/login')
          axios.post('vrv-monitor-platform-web/logout')
          this.hideModal()
        } else {
          message.error(res.data.message)
        }
      }
    });
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 16},
    }
    const buttonItemLayout = {
      wrapperCol: {span: 20, offset: 2}
    }
    return (
      <Modal
        title={<Title/>}
        visible={true}
        footer={null}
        onCancel={this.hideModal}
      >
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            label="旧密码"
            {...formItemLayout}
          >
            {getFieldDecorator('oldPwd', {
              rules: [{required: true, message: '密码不能为空!'}],
            })(
              <Input placeholder="请输入旧密码" type="password"/>
            )}
          </FormItem>
          <FormItem
            label="新密码"
            {...formItemLayout}
          >
            {getFieldDecorator('newPwd', {
              rules: [{required: true, message: '密码不能为空!'}],
            })(
              <Input placeholder="请输入新密码" type="password"/>
            )}
          </FormItem>
          <FormItem
            label="确认新密码"
            {...formItemLayout}
          >
            {getFieldDecorator('confirmPwd', {
              rules: [{required: true, message: '密码不能为空!'}, {
                validator: this.compareToFirstPassword,
              }],
            })(
              <Input placeholder="请再次输入新密码" type="password"/>
            )}
          </FormItem>
          <FormItem {...buttonItemLayout} style={{textAlign: 'right', marginBottom: 0}}>
            <Button onClick={this.hideModal}>取消</Button>
            <Button type="primary" style={{marginLeft: '20px'}} htmlType="submit">确认</Button>
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

const UpdatePwd = Form.create()(App);
export default UpdatePwd